<template>
  <div>
    <h2>World</h2>
    <p>count: {{ count }}</p>
    <p>countDouble: {{ countDouble }}</p>
  </div>
</template>

<script setup>
import { toRefs } from 'vue'
import { storeToRefs } from 'pinia'
import { useXxStore } from '../stores/xx'

// const xxStore = useXxStore()

// store 实例是一个 Proxy 对象，不要对它做解构操作，会失去响应式
//    如果就是想要做解构的话，可以使用 pinia 提供的 storeToRefs() 工具函数
//      storeToRefs 与 toRefs 类似
// const { count, countDouble } = useXxStore()

// 这样使用，不失去响应式，推荐使用 storeToRefs 而不是 toRefs
const { count, countDouble } = toRefs(useXxStore())

const toRefsObj = toRefs(useXxStore())
console.log('toRefsObj', toRefsObj)

const storeToRefsObj = storeToRefs(useXxStore())
console.log('storeToRefsObj', storeToRefsObj)
</script>
